<template>
  <view class="page user">
    <view class="liview">
      <view class="dview">
        <text class="kang">{{ info.value.name || '' }}</text>
        <view class="dtwoview">
          <wd-input-number input-width="50px" v-model="info.parms.qty" :max="10"/>
        </view>
      </view>

      <view class="zhi zhitwo">
        <text class="zhiname">支持功能：{{ Support(info.value.compoment) }}</text>
      </view>
      <view class="zhi zhitwo" style="padding-right: 30rpx;">
        <text class="zhinametwo">月租：</text>
        <view class="gview">
          <text class="pirce" :style="{ color: 'red' }">¥{{ info.value.price }}</text>
        </view>
        <text class="zhinametwo ml">押金：</text>
        <view class="gview">
          <text class="pirce" :style="{ color: 'red' }">¥ {{ info.value.deposit }}</text>
        </view>
      </view>
    </view>

    <view class="liview two" style="padding: 8px 30rpx;">
      <view class="zhi zhitwo">
        <text class="zhinamethree">租赁门店
          <text :style="{ color: 'red' }">*</text>
          ：
        </text>
        <view class="gview">
          <!-- <text class="rval">{{info.meninfo.name?info.meninfo.name:'请选择门店'}}</text> -->
          <!-- <image src="/static/icon/rfan.png" class="rfan"></image> -->
          <wd-picker style="width: 100%;" :columns="newcolumns" v-model="info.meninfo.name"
                     @confirm="handleConfirmnew"/>
        </view>
        <view class="gxinzeng ml" @click.stop="getadd">新增门店</view>
      </view>
    </view>


    <view class="liview two" v-if="info.value.agreement">
      <view class="zhi zhithree">
        <text class="zhinamethree">租赁协议：</text>
        <view class="gview" style="color: #333;font-size: 30rpx;">
          <!-- <text class="xieyi">1.乙方按银行转账的方式支付租金给甲方，租金每年支付一
            次，在每个支付周期开始前15日内支付</text> -->
          <rich-text :nodes="info.value.agreement"></rich-text>
        </view>
      </view>
    </view>
    <view class="xieyiview" @click.stop="getxieyi">
      <image src="/static/icon/quan.png" class="quan" v-if="info.parms.is_agree == 'N'"></image>
      <image src="/static/icon/quans.png" class="quan" v-if="info.parms.is_agree == 'Y'"></image>
      <text class="yiname">同意以上租赁协议<text :style="{ color: 'red' }">*</text></text>
    </view>
    <view class="shenview" @click="getshenqing">
      申请租赁
    </view>
  </view>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {useMessage} from '@/uni_modules/wot-design-uni'
import userApiService from "@/api/user.js"
import {
  onLoad,
  onShow,
  onPullDownRefresh
} from '@dcloudio/uni-app'

const value = ref('1')
var modelValue = ref(true)

var cuCustomerName = ref('')

let info = reactive({
  value: {},
  menlist: [],
  meninfo: {
    name: ''
  },
  parms: {
    cu_store_id: '',//申请门店
    code: '',//单号
    qty: 1,//数量
    is_agree: 'N',//是否同意租赁协议 同意Y 不同意 N
    md_device_type: ''
  },
  total: 0
})
var newcolumns = ref([
  {
    label: '',
    value: ''
  },
])
var menlist = ref([])

const meninfo = {}

function handleChange() {
}


function init() {
  userApiService.getDatatoken().then(res => {
    // console.log(res.records[0])
    info.value = res.records[0]
    // console.log(info)
    info.parms.md_device_type = info.value.id
    info.total = (Number(info.value.price) + Number(info.value.deposit))
  })
}

function getxieyi() {
  info.parms.is_agree = info.parms.is_agree == 'N' ? 'Y' : 'N'
}

function storelist() {
  userApiService.cuStorelist().then(res => {
    // console.log(res)
    info.menlist = res.records

    if (res.records != '') {
      info.meninfo = res.records[0]
      info.parms.cu_store_id = res.records[0].id
    }
    let data = res.records
    let parms = []
    for (let i in data) {
      let a = {
        label: '',
        value: ''
      }
      a.label = data[i].name
      a.value = data[i].id
      parms.push(a)
    }
    newcolumns.value = parms

  })
}

function getcode() {
  userApiService.executeRuleByCode({
    rule: 'apply_device_code'
  }).then(res => {
    // console.log(res)
    info.parms.code = res
  })
}

function getadd() {
  uni.navigateTo({
    url: "/pages/mine/ApplyAdd"
  })
}

function handleConfirmnew({value, selectedItems}) {
  info.cu_customer_id = selectedItems.value
  info.cu_customer_name = selectedItems.label
}

function getshenqing() {
  console.log(info.parms)
  if (!info.parms.cu_store_id) {
    uni.showToast({
      icon: "none",
      title: "未选择租赁门店",
      duration: 2000
    })
    return false;
  }
  if (info.parms.is_agree == 'N') {
    uni.showToast({
      icon: "none",
      title: "请先勾选协议",
      duration: 2000
    })
    return false;
  }

  userApiService.applyadd(info.parms).then((res) => {
    console.log(res)

    uni.showToast({
      icon: "none",
      title: "申请成功"
    })
    setTimeout(() => {
      let newtotal = Number(info.total) * Number(info.parms.qty)
      uni.navigateTo({
        url: `/pages/mine/ApplyShechaun?newcode=` + res + '&total=' + newtotal
      })
    }, 500)
  })
}

function Support(e) {
  let shuzu = [
    {name: '生物微电', id: 'swwd'},
    {name: '点阵波', id: 'dzb'},
    {name: '智能热疗', id: 'sprz'},
    {name: '纳米超导', id: 'nmcd'},
  ]
  let data = []
  if (e) {
    let arr = e.split(",");
    for (let i in arr) {
      for (let j in shuzu) {
        if (arr[i] == shuzu[j].id) {
          data.push(shuzu[j].name)
        }
      }
    }
  }
  return data.toString();
}

onShow(() => {
  init()
  storelist()
  getcode()
})
</script>
<style lang="scss" scoped>
.user {
  background: #F7F8FC !important;
  height: 100vh;
  padding-bottom: 210rpx;

  .liview {
    margin: 30rpx 30rpx 0;
    padding: 35rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .kang {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;

    }

    .dtwoview {
      margin-left: auto;
    }

    .dview {
      display: flex;
      flex-direction: row;
      align-items: center;

    }

    .zhi {
      display: flex;
      flex-direction: column;
      margin-top: 22rpx;

      .zhiname {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 28rpx;
      }

      .zhinametwo {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }

      .gview {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 8rpx;

        .gitem {
          padding: 4rpx 15rpx;
          margin-right: 10rpx;
          border: 1rpx solid rgb(59, 141, 255);
          border-radius: 10rpx;
          color: #3b8dff;
          font-size: 25rpx;
          font-weight: normal;
        }

        .pirce {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }

      .rval {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      .rfan {
        margin-left: 12rpx;
        width: 30rpx;
        height: 30rpx;

      }
    }

    .zhitwo {
      display: flex;
      flex-direction: row;
      align-items: center;

      .zhinamethree {
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }

      .gview {
        margin-top: 0;
        // margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;


      }

    }

    .zhithree {
      display: flex;
      flex-direction: column;
    }

    .xieyi {
      font-weight: 400;
      font-size: 24rpx;
      color: #111111;
    }
  }

  .gxinzeng {
    padding: 6rpx 20rpx;
    background-color: #597FE8;
    color: #fff;
    font-weight: normal;
    font-size: 28rpx;
    border-radius: 10rpx;
  }

  .ml {
    margin-left: auto;
  }

  .two {
    .zhi {
      .zhiname {
        color: #333;
        font-weight: 500;
      }
    }

    .zhi:first-child {
      margin-top: 0;
    }
  }
}

.xieyiview {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 30rpx;

  .quan {
    width: 40rpx;
    margin-right: 20rpx;
    height: 40rpx;
  }

  .yiname {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
  }
}

.shenview {
  height: 88rpx;
  background: #597FE8;
  border-radius: 44rpx;
  margin: 200rpx 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 32rpx;
  color: #FFFFFF;

}

.zubot {
  position: fixed;
  height: 200rpx;
  background-color: #fff;
  background-color: #fff;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding: 0 30rpx;
  justify-content: center;

  .tyi {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-bottom: 15rpx;

  }

  .tybtn {
    height: 88rpx;
    width: 94%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3b8dff;;
    color: #fff;
    font-size: 30rpx;
    border-radius: 10rpx;
  }
}

.zhinamethree {
  font-weight: bold;
  font-size: 28rpx;
  color: #333333;
}
</style>
